<template>
  <div
    id="recommend-music"
    v-loading="isLoading"
    element-loading-background="#fafafa">
    <!-- 标题 -->
    <div class="title">
      <span>推荐歌单</span>
      <div class="more right" @click="morePlaylists">
        更多
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>
    <!-- 主体 -->
    <!-- <song-lists
      :songLists="songLists"
      @imgLoad="imgLoad"
      :isLoading="isLoading"/> -->
    <!-- <div class="top-list-container">
      <brief-playlist
        v-for="(item, index) in playlists"
        :key="index"
        :playlist="item"
        @imgLoad="imgLoad"/>
    </div> -->
    <brief-playlists
      :playlists="playlists"
      @imgLoad="imgLoad"
      :class="{ hidden: isLoading }"/>
  </div>
</template>

<script>
// import SongLists from 'components/content/songlists/SongLists.vue'
import BriefPlaylists from 'components/content/briefplaylists/BriefPlaylists.vue'

export default {
  name: 'RecommendMusic',
  data () {
    return {
      playlists: null,
      isLoading: false
    }
  },
  components: {
    // SongLists,
    BriefPlaylists
  },
  created () {
    this._getMusics()
  },
  methods: {
    // 1. 异步加载歌单信息
    _getMusics (limit = 10) {
      new Promise((resolve) => {
        this.isLoading = true
        this.playlists = null
        setTimeout(() => {
          resolve()
        })
      }, 200).then(async () => {
        const result = await this.$http.get(`/personalized?limit=${limit}`)
        // console.log(result.data.result)
        // 获取失败
        if (result.status !== 200 || result.data.code !== 200) {
          return this.$message.info('获取推荐歌单失败')
        }
        // 获取成功
        this.playlists = result.data.result
      })
    },
    // 2. 图片加载完
    imgLoad () {
      this.isLoading = false
      this.$bus.$emit('imgLoad')
    },
    // 3. 更多歌单
    morePlaylists () {
      this.$router.push('/main/discover/playlists')
    }
  }
}
</script>

<style scoped lang="less">
#recommend-music {
  user-select: none;
  position: relative;
  padding-bottom: 40px;
  min-height: 250px;
  overflow: hidden;
  // 标题部分
  .title {
      padding-bottom: 10px;
      border-bottom: 1px solid #e1e1e2;
    span {
      font-size: 18px;
      color: black;
    }
    .more {
      cursor: pointer;
      line-height: 35px;
      font-size: 12px;
      color: #666;
    }
  }
  // 歌单部分
  .musics {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    flex-flow: wrap;
    .music {
      width: 18%;
      border: 1px solid #e1e1e2;
      border-radius: 5px;
      background-color: #fefefe;
      transition: all 200ms;
      box-shadow: 0 0 7px 0 #fff;
      padding-bottom: 5px;
      img {
        cursor: pointer;
        width: 100%;
        border-radius: 5px 5px 0 0;
      }
      p {
        cursor: pointer;
        text-align: center;
        font-size: 12px;
      }
      &:nth-of-type(n+6) {
        margin-top: 20px;
      }
      &:hover {
        transform: translateY(-10px);
      }
    }
  }
}
</style>

<style lang="less">
.el-loading-mask {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 35px;
  bottom: 0;
}
</style>
